<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>聊天系统-dmyang</title>
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>

    </style>
</head>
<body>

<div class="wrapper">
    <div class="nav">
        <ul class="layui-nav" lay-filter="">
            <li class="layui-nav-item"><a href="">医院首页</a></li>
            <li class="layui-nav-item"><a href="">科室详情</a></li>
            <li class="layui-nav-item"><a href="">医院动态</a></li>
            <li class="layui-nav-item"><a href="">联系我们</a></li>
            <li class="layui-nav-item"><a href="">帮助</a></li>
            <li class="layui-nav-item layui-this"><a href="">工作区</a></li>
        </ul>
    </div>
    <div class="main">
        <div id="picDiv">
            <img id="myImg" src="" style="display:block;clear: both;margin: auto;" />
        </div>
        <div id="formDiv">
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">诊断意见</label>
                <div class="layui-input-block">
                    <textarea id="desc4treat" name="desc4treat" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo" id="submitTreat">提交诊断</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </div>
    <div style="height: 105px;"></div>
    <footer>
        <ul class="share-group">
            <li>友情链接</li>
            <li>友情链接</li>
            <li>友情链接</li>
            <li>友情链接</li>
            <li>友情链接</li>
        </ul>
        <div class="copy">
            &copy 医科大学附属医院 - 2018
        </div>
    </footer>
</div>

<button id="over-treat" class="over-treat">结束诊断</button>

<script src="/layui/layui.js"></script>
<script src="/js/jquery.min.js"></script>
<script>

    if(!/^http(s*):\/\//.test(location.href)){
        alert('请部署到localhost上查看该演示');
    }
    layui.use(['layer','layim'], function(layim){
        var layer = layui.layer,
            layim = layui.layim;
        layim.config({
            init: {
                //配置当前登录用户信息  从全域Session取
                mine: {
                    "username": "${sessionScope.name}" //我的昵称
                    ,"id": "${sessionScope.pk}" //我的ID
                    ,"status": "online" //在线状态 online：在线、hide：隐身
                    ,"remark": "在深邃的编码世界，做一枚轻盈的纸飞机" //我的签名
                    ,"avatar": "//res.layui.com/images/fly/avatar/00.jpg" //我的头像
                }
            }
            //开启客服模式
            ,brief: true
            //,title:"继续聊天"
            //,isfriend:false
            ,minRight:'10px'
            //获取群员接口（返回的数据格式见下文）
            ,members: {
                url: '/doctor/onlineDocs' //接口地址（返回的数据格式见下文）
                ,type: 'get' //默认get，一般可不填
                ,data: {} //额外参数
            }
            //上传图片接口
            ,uploadImage: {
                url: '/upload/img' //（返回的数据格式见下文）
                ,type: '' //默认post
            }

        });
        layim.chat({
            name: '群聊'
            ,type: 'group' //群组类型
            ,avatar: 'http://tp2.sinaimg.cn/5488749285/50/5719808192/1'
            ,id: 89124053 //定义唯一的id方便你处理信息
            ,members: 0 //成员数，不好获取的话，可以设置为0
        });
        //监听发送消息
        layim.on('sendMessage', function(data){
            var To = data.to;
            //$("body").data("To",To)
            //用websocket发送出去
            var dat={};
            dat["from"]="${sessionScope.pk}";
            dat["fromName"]="${sessionScope.name}";
            dat["to"]=89124053;
            dat["text"]=data.mine.content;
            dat['fromAvatar']=data.mine.avatar;
            websocket.send(JSON.stringify(dat));
        });

        //websocket编程 start
        // 指定websocket路径
        var websocket;
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://localhost:8080/ws?pk=${sessionScope.pk}");
        } else if ('MozWebSocket' in window) {
            websocket = new MozWebSocket("ws://localhost:8080/ws${sessionScope.pk}");
        } else {
            websocket = new SockJS("http://localhost:8080/ws/sockjs${sessionScope.pk}");
        }
        websocket.onmessage = function(event) {
            var data=JSON.parse(event.data);
            if(data.from!="-1"&&data.from!="-2"){//用户或者群消息
                var obj = {};
                obj = {
                    username: data.fromName
                    ,avatar: data.fromAvatar
                    ,id: 89124053
                    ,type: "group"
                    ,content: data.text
                }

               /* //模拟系统消息
                layim.getMessage({
                    system: true //系统消息
                    ,id: 89124053
                    ,type: "group"
                    ,content: '贤心加入群聊'
                });
*/
                layim.getMessage(obj);

            }else if(data.from=="-1"){//上线消息
                if(data.text!="${sessionScope.name}")
                {
//                onlineusers();
//                alert(data.text+"上线了");
                }
            }else if(data.from=="-2"){//下线消息
                if(data.text!="${sessionScope.username}")
                {
                }
            }
        };
        function waitPatList() {
            $.post("/doctor/waitPatList",{"reqPk":"${sessionScope.pk}"},function(data){
                if ( $("body").data("d") != data){
                    var obj = JSON.parse(data)
                    for(var i=0;i<obj.length;i++){
                        layim.chat(obj[i]);
                    }
                    if( obj.length > 0 ){
                        //查到需要咨询的患者后，停止定时器。
                        window.clearInterval(timer_show_tip);
                        //$("#over-treat").css("display:block");
                    }
                }

                $("body").data("d",data);
            });
        }
        //每一秒查询一次有无需要咨询的患者。
        var timer_query_pat = window.setInterval(function(){
            //waitPatList();
        },3000)
        var timer_show_tip = window.setInterval(function(){
            //layer.msg('正在为您匹配患者，请稍后……');
        },5000)




        //websocket编程 end


    });

</script>
</body>
</html>
